<script setup lang="ts">
const props = defineProps(["todo"]);
</script>

<template>
  <div>
    <div class="todo-item" :class="{ done: todo.completed }">
      <!-- 使用label包裹input与span，后续用户无论点击input还是span，都会触发checkbox事件，从而实现勾选了input的效果 -->
      <label>
        <input
          type="checkbox"
          :checked="todo.completed"
          @change="$emit('change-state', $event)"
        />
        {{ todo.content }}
        <span class="check-button"></span>
      </label>
    </div>
  </div>
</template>

<style scoped></style>
